<template>
    <div class="productDetails" v-if="show">
      <miao-header backBtn="true">
        <span slot="header">商品详情</span>
      </miao-header>
      <div class="commodity-scroll" ref="commodityScroll">
        <div>
          <div v-for="(item, index) in commodityData" :key="index">
            <!--轮播-->
            <div class="detailsImgScroll">
              <my-carousel :loop="true" :autoPlay="true" :interval="2000">
                <video slot="meng" class="video"
                       controls
                       autoplay
                       :poster="item.prodImage[1]"
                       :src=vedioHref></video>
                <img slot="carousel"
                     v-for="val in item.prodImage"
                     :src="val" alt="">
              </my-carousel>
            </div>
            <div class="synopsis">
              <p class="product">{{item.prodSubTitle}}</p>
              <p class="priceP">
                <span class="commodityPrice">￥{{Number(item.currentPrice).toFixed(2)}}</span>
                <span class="commodity-originalPrice">/件</span>
                <span class="commodity-originalPrice line-through">{{Number(item.originPrice).toFixed(1)}}</span>
              </p>
              <div class="commodity-introduce">
                <span>{{item.prodSupTitle}}</span>
              </div>
              <div class="commodity-serve">
              <span v-for="cli in cotyCondition">
            <i class="el-icon-circle-check-outline"></i>
            <span>{{cli}}</span>
          </span>
                <router-link to="/home" tag="i" class="commodity-icon-to el-icon-arrow-right"></router-link>
              </div>
              <div class="commodity-parameter">
                <i class="commodity-icon-outline el-icon-tickets"></i>
                <span>商品参数</span>
                <router-link to="/home" tag="i" class="commodity-icon-to el-icon-arrow-right"></router-link>
              </div>
              <div class="image-text">
                <i></i>
                <span>图文详情</span>
                <router-link to="/home" tag="i" class="commodity-icon-to el-icon-arrow-right"></router-link>
              </div>
              <div class="commodity-evaluate">
                <img src="../assets/messag.png" alt="">
                <span>商品评价</span>
                <div class="icon-star-right">
                  <i v-for="(iconNumber, iconKey) in Math.floor(cotyEvaluate)"
                     class="icon-star el-icon-star-on"
                     :key="iconKey"></i>
                  <i v-for="gray in 5-Math.floor(cotyEvaluate)"
                     class="gray-star el-icon-star-on"></i>
                </div>
                <router-link to="/home" tag="i" class="commodity-icon-to el-icon-arrow-right"></router-link>
              </div>
              <div class="commodity-remark">
                <p>香甜可口</p>
                <p class="commodity-remark-timer">{{new Date().getFullYear() +'-'+ new Date().getMonth() +'-'+ new Date().getDate()}}</p>
              </div>
              <div class="historyShow">
                <div class="history">
                  <span>买过该商品的还看过</span>
                </div>
                <div class="commodity-history">
                  <div class="goods-history" v-for="(his, hisindex) in cotyHistory"
                       :key="hisindex"
                       @click="cotyHistoryFn(his)">
                    <img :src="his.prodImage[2]" alt="">
                    <div class="text-all-left"><span>{{his.prodSubTitle}}</span></div>
                    <p>￥{{Number(his.currentPrice).toFixed(2)}}</p>
                  </div>
                </div>
              </div>

            </div>
            <div class="upload"></div>
          </div>
        </div>
      </div>
      <!--页脚-->
      <ul class="productDetailsFooter">
        <router-link class="page" to="/home" tag="li">
          <img src="../assets/home.png" alt=""><br>
          <span>首页</span>
        </router-link>
        <router-link class="page" to="/home" tag="li">
          <img src="../assets/share.png" alt=""><br>
          <span>分享</span>
        </router-link>
        <router-link class="price" to="cart" tag="li">
          <img src="../assets/cart.png" alt=""><br>
          <span>购物车</span>
          <p v-if="cartNumber>0">{{cartNumber}}</p>
        </router-link>
        <li class="addCart" @click='addShopCart'>
          <span>加入购物车</span>
        </li >
      </ul>
    </div>
</template>

<script>
  export default {
    name: "productDetails",
    data(){
      return{
        loop:true,
        commodityData:[],
        cotyHistory:null,
        cotyCondition:['29免邮','1小时达','30秒退款'],
        vedioHref:null,
        cotyEvaluate:null,
        cartNumber:0,
        show:true,
        cotyShow:null
      }
    },
    created(){
      this.$http.post('/api/prodDetails').then((req)=>{
        if(req.data.code===1){
          this.cotyEvaluate = req.data.data.star;
          this.vedioHref = req.data.data.vedio;
          this.cotyHistory = req.data.data.associateProd;
        }
      });
      this.$store.state.prod&&(this.commodityData.push(this.$store.state.prod));
    },
    mounted(){
        let _this = this;
        this.$nextTick(()=>{
          this.$refs.commodityScroll&&(this.cotyShow = new this.$BSscroll(this.$refs.commodityScroll,{
            //动画移动方向
            scrollY:true,
            //弹跳的方向
            bounce:{
              left:false,
              right:false,
              top:false,
              bottom:true
            },
            //动画速率
            momentum:true,
            click:true
          }));
        })
    },
    methods:{
      addShopCart(){
        this.$http.put('/api/cart',{
          pid:this.commodityData[0]._id
        }).then(req=>{
          if(req.data.code === 1){
            this.cartNumber++;
          }
        });
      },
      cotyHistoryFn(val){
        this.show=false;
        this.$store.state.prod = val;
        this.commodityData[0] = val;
        this.$http.post('/api/prodDetails').then((req)=>{
          if(req.data.code===1){
            this.cotyEvaluate = req.data.data.star;
            this.vedioHref = req.data.data.vedio;
            this.cotyHistory = req.data.data.associateProd;
          }
        });

        this.show=true;
        this.cotyShow.scrollTo(0,0,300,'easeIn');
        this.cotyShow.refresh();
      }
    }
  }
</script>

<style scoped>
  *{
    font-family: "Adobe 黑体 Std R";
  }
  .show{
    transition: all 0.3s ease-out;
  }
  .goBack>i{
    font-size: 52px;
    font-weight: bold;
    color: #fff;
  }
  .video{
    overflow: hidden;
    width: 100vw;
    height: 700px;
  }
  .detailsImgScroll{
    font-size: 0;
    width: 100vw;
    height: 750px;
    overflow: hidden;
  }
  .detailsImg{
    width: 400vw;
    height: 700px;
    font-size: 0;
  }
  .detailsImg>img{
    width: 100vw;
    height: 100%;
    display: inline-block;
  }
  .productDetailsFooter{
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f3f3f3;
    height: 100px;
    text-align: center;
    font-size: 0;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .productDetailsFooter>li{
    display: inline-block;
    height: 90px;
    margin: 5px 0;
    padding: 0 40px;
    box-sizing: border-box;
    vertical-align: middle;
  }
  .page{
    width: 20%;
    box-sizing: border-box;
    border-right: 1px solid #ebebeb;
    color: #f0531b;
  }
  .page>img{
    height: 50px;
  }
  .page>span{
    font-size: 28px;
  }
  .price>img{
    width: 52px;
    line-height: 100px;
    font-size: 48px;
    font-weight: bold;

  }
  .price>span{
    font-size: 28px;
    color: #f0531b;
  }
  .price{
    position: relative;
  }
  .price>p{
    display: inline-block;
    position: absolute;
    top:-3px;
    right: 65px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: RGB(254,60,46);
    color: white;
    text-align: center;
    line-height: 34px;
    font-size: 24px;
  }
  .productDetailsFooter>.addCart{
    background: #f0531b;
    height: 100px;
    margin: 0;
    line-height: 100px;
  }
  .productDetailsFooter>.price,.productDetailsFooter>.addCart{
    padding: 0;
    width: 30%;
    box-sizing: border-box;
  }
  .addCart>span{
    font-size: 32px;
    color: white;
  }
  .product{
    font-size: 36px;
    font-family: 华文细黑;
    max-height: 43px;
    font-weight: 600;
    padding-left: 20px;
    color: RGB(69,69,69);
    word-break:break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
  }
  .priceP{
    margin-top:30px;
    padding-left: 14px;
  }
  .commodityPrice{
    color: #f0531b;
    font-size: 50px;
    font-weight: bold;
  }
  .priceP>.commodity-originalPrice{
    font-size: 28px;
    color: #989898;
  }
  .priceP>.line-through{
    text-decoration: line-through;
  }
  .commodity-introduce,.commodity-serve,
  .commodity-parameter,.image-text,
  .commodity-evaluate{
    box-sizing: border-box;
    font-size: 0;
    height: 100px;
    line-height: 80px;
    border-top:1px solid #ebebeb;
    padding: 15px 20px;
    margin-top: 35px;
  }
  .commodity-introduce>span{
    font-size: 28px;
    color: #888888;
    word-break:break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
  }
  .commodity-serve{
    margin: 0;
  }
  .commodity-serve>span{
    padding-right:40px;
    display: inline-block;
    box-sizing: border-box;
    width: 30%;
  }
  .commodity-serve>span>i{
    font-size: 42px;
    color: RGB(86,217,108);
    line-height: 80px;
    vertical-align: middle;
  }
  .commodity-serve>span>span {
    font-size: 28px;
    color: #4b4b4b;
    vertical-align: middle;
  }
  .commodity-icon-to{
    font-size: 42px;
    color: #afafaf;
    float: right;
    line-height: 80px;
  }
  .commodity-parameter{
    margin: 0;
  }
  .commodity-icon-outline{
    display: inline-block;
    font-size: 42px;
    color: #b2b2b2;
    padding-right: 14px;
  }
  .commodity-parameter>span{
    font-size: 36px;
    color: RGB(68,68,68);
  }
  .image-text{
    margin: 0;
  }
  .image-text>span{
    font-size: 36px;
    color: RGB(68,68,68);
    margin-left: 60px;
  }
  .commodity-evaluate{
    position: relative;
    margin: 0;
  }
  .commodity-evaluate>img{
    width: 40px;
    margin-right:20px;
    vertical-align: middle;
  }
  .commodity-evaluate>span{
    font-size: 36px;
    color: RGB(68,68,68);
    vertical-align: middle;
  }
  .commodity-evaluate>.icon-star-right{
    display: inline-block;
    position: absolute;
    right: 60px;
  }
   .icon-star{
     vertical-align: middle;
    line-height: 80px;
    font-size: 38px;
    color: RGB(247,217,2);
  }
   .gray-star{
     font-size: 38px;
     vertical-align: middle;
     line-height: 80px;
     color: #d9d9d9;
   }
  .upload{
    height: 300px;
  }
  .commodity-remark{
    height: 160px;
    width: 100%;
  }
  .commodity-remark>P{
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    color: RGB(69,69,69);
    font-size: 34px;
  }
  .commodity-remark>.commodity-remark-timer{
    text-align: right;
    padding-right: 40px;
    color: RGB(69,69,69);
  }
  .history{
    height: 85px;
    padding: 0 15px;
    line-height: 90px;
    color: #525252;
    box-shadow: 1px 1px 3px 1px #eee;
    background: RGB(243,243,243);
  }
  .history>span{
    font-size: 38px;
    font-weight: bold;
    font-family: 华文细黑;
    color: #525252;
  }
  .goods-history{
    display: inline-block;
    box-sizing: border-box;
    width: 33.3333%;
    padding: 20px;
    max-height: 400px;
    font-size: 0;
    vertical-align: middle;
  }
  .goods-history>img{
    height: 225px;
    width: 100%;
  }
  .text-all-left{
    font-size: 30px;
    display: inline-block;
    height: 85px;
    overflow: hidden;
    margin: 0 auto;
  }
  .goods-history>.text-all-left>span{
    text-align: left;
    font-size: 32px;
    color: RGB(68,68,68);
    word-break:break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
  }
  .goods-history>p{
    text-indent:1em;
    font-size: 32px;
    font-family: "Adobe 楷体 Std R";
    color: #f0531b;
  }
  .commodity-scroll{
    margin-top: 100px;
    height: 100vh;
    overflow: hidden;
  }
  .shoppingCart{
    height: 95px;
    width: 95px;
    text-align: center;
    line-height: 95px;
    background: rgba(0,0,0,.7);
    position: fixed;
    right: 0;
    top: 50%;
    border-radius: 20px;
  }
  .shoppingCart>img{
    width:50px;
    margin-top: 20px;
  }
</style>
